<template>
  <div class="reItem" @click="toProductDetail">
    <div class="reRow1">
      <img :src="item.logo">
      <line1 len="0.4rem" style="margin:0 0.2667rem"></line1>
      <div class="titleBox">
        {{this.item.name}}
        <div>
          <Tag :tag="item.style" style="margin-left:.2667rem"></Tag>
        </div>
      </div>
      <img src="../../../../../static/assets/arrowr.jpg">
    </div>
    <div class="reRow2">
      <div class="itemBox">
        <span id="yearRateBox">
          <span id="yearRate">{{parseInt(this.item.jine)}}</span>元
        </span>
        <span>投资</span>
      </div>
      <line1 style="margin:0 0 0 .3rem"></line1>
      <div class="itemBox" style="margin-left:0.33rem">
        <span id="reBackBox">
          <span id="reBack">{{this.item.shouyi}}</span> 元
        </span>
        <span>预期收益</span>
      </div>
      <div id="helperItemBox" class="vux-1px">
        <div class="helperItemRow">
          <span class="txt">{{this.item.lixi}}元</span><span>利息</span>
        </div>
        <span>+</span>
        <div class="helperItemRow">
          <span class="txt">{{this.item.fanli}}元</span><span>返利</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Line1 from '../../../component/common/Line'
import Tag from '../../../component/common/Tag'
import {setStore} from '../../../../config/mUtils.js'

export default {
  components:{
    Line1,
    Tag,
  },
  props:['item'],
  data(){
    return {
      type:1,
      cssOB:{
        margin:'0 0.4rem 0 1rem',
      }
    }
  },
  methods:{
    toProductDetail(){
      this.$router.push('/ProductDetail?pid='+this.item.id)
      setStore('cp',this.item.id)
    }
  }
}
</script>
<style lang="less" scoped>
  .reItem{
    box-sizing: border-box;
    width: 9.2rem;
    height: 3.226667rem;
    box-shadow:2px 2px 10px #aaa;
    padding: 0 .56rem;
    // background-color: burlywood;
    .reRow1{
      height: .986667rem;
      // background-color: chartreuse;
      display: flex;
      flex-direction: row;
      align-items: center;
      line-height: .986667rem;
      .titleBox{
        width: 77%;
        display: flex;
        flex-direction: row;
      }
      img:first-child{
        width: 1.1333rem;
        height: 0.4133rem;
      }
      img:last-child{
        width: 0.16rem;
        height: 0.32rem;
      }
    }
    .reRow2{
      height: 2.1rem;
      // background-color: cornflowerblue;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 0.32rem;
      color: #c6c6c6;
      .itemBox{
        display: flex;
        flex-direction: column;
      }
      #yearRateBox{
        color:#dd3930;
        #yearRate{
          font-size: 0.6rem;
          margin-right:.1rem;
          font-weight: bold
        }
      }
      #reBackBox{
        color:#000;
        #reBack{
          font-size: 0.58rem;
          font-weight: bold
        }
      }
      .txt{
        color:#000;
        font-weight: bold
      }
      #helperItemBox{
        display: flex;
        flex-direction: row;
        width: 3.12rem;
        height: 1.2rem;
        margin-left: .3rem;
        justify-content: space-around;
        align-items: center;
        font-size: 0.32rem;
        // background-color: aqua
        .helperItemRow{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
</style>
